<template>
  <div class="form">
    <div class="row">
      <label class="label">文本输入框</label>
      <el-input placeholder="请输入内容" v-model="text" clearable></el-input>
      <p class="browser">text is: {{ text }}</p>
    </div>
    <div class="row">
      <label class="label">图标输入框</label>
      <el-input placeholder="请输入电话" suffix-icon="el-icon-phone" v-model="text2"></el-input>
      <p class="browser">text is: {{ text2 }}</p>
    </div>
    <div class="row">
      <label class="label">复合输入框</label>
      <el-input placeholder="请输入内容" v-model="text3"><template slot="prepend">Http://</template></el-input>
      <p class="browser">text is: {{ text3 }}</p>
    </div>
    <div class="row">
      <label class="label">按钮输入框</label>
      <el-input placeholder="请输入内容" v-model="text4" class="input-with-select">
        <el-select v-model="text4Select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search">检测</el-button>
      </el-input>
      <p class="browser">text is: {{ text4 }}</p>
    </div>
    <div class="row">
      <label class="label">多行文本框</label>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      <p class="browser">text is: {{ textarea }}</p>
    </div>
    <div class="row">
      <label class="label">多个复选框</label>：
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="multCheckbox" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="option in cities" :label="option" :key="option">{{option}}</el-checkbox>
      </el-checkbox-group>
      <p class="browser">text is: {{ multCheckbox }}</p>
    </div>
    <div class="row">
      <label class="label">复选框按钮</label>
      <el-checkbox-group v-model="multCheckbox2">
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
      </el-checkbox-group>
      <p class="browser">text is: {{ multCheckbox2 }}</p>
    </div>
    <div class="row">
      <label class="label">单选框示例</label>
      <el-radio v-model="radio" label="1">备选项1</el-radio>
      <el-radio v-model="radio" label="2">备选项2</el-radio>
      <p class="browser">text is: {{ radio }}</p>
    </div>
    <div class="row">
      <label class="label">单选按钮组</label>
      <el-radio-group v-model="radioButton">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
      <p class="browser">text is: {{ radioButton }}</p>
    </div>
    <div class="row">
      <label class="label">下拉框示例</label>
      <el-select v-model="select" placeholder="请选择">
        <el-option
          v-for="item in cities"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <p class="browser">text is: {{ select }}</p>
    </div>
    <div class="row">
      <label class="label">下拉框多选</label>
      <el-select v-model="multSelect" multiple placeholder="请选择">
        <el-option
          v-for="item in cities"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <p class="browser">text is: {{ multSelect }}</p>
    </div>
    <div class="row">
      <label class="label">级联选择框</label>
      <el-cascader
        :options="treeJson"
        v-model="cascaderSelect"
        @change="handleChange">
      </el-cascader>
      <p class="browser">text is: {{ cascaderSelect }}</p>
    </div>
  </div>
</template>
<script type="text/javascript">
  import data from './data'
  import methods from './method'

  export default{
    name: 'form02',
    data(){
      return data.init();
    },
    methods:methods,
    mounted(){
      this.test2();
    }
  }
</script>
<style type="text/css">
  .form{
    padding:20px;
    font-size:16px !important;
  }
  .form .row{
    margin:5px;
  }
  .form .label{
    color:#222;
    font-weight: bold;
    font-size:14px;
  }
  .form .label:after{
    content: "：";
  }
  .form .input,.form .textarea{
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width:350px;
  }
  .form .input{
    height: 40px;
    line-height: 40px;
  }
  .form .textarea{
  }
  .form .browser{
    padding-left:20px;background: #f2f2f2;padding:4px;letter-spacing: 2px;
    border-radius:4px;margin-top:2px;
    color:#888;
  }

  .el-cascader,.el-select{
    width:100%;
  }
</style>
